<navbar></navbar>

<style>
    .styled-select select {
        background: transparent;
        margin-left: 13px;
        width: 268px;
        padding: 5px;
        font-size: 16px;
        border: 1px solid #ccc;
        height: 34px;
        -webkit-appearance: none; /*for chrome*/
    }
</style>

<title>Food Manage</title>


<div class="container-fluid">

    <div class="tab-content">
        <div class="col-sm-10 col-sm-offset-1 col-md-11 col-md-offset-1 main tab-pane active"
             id="foodmanager">

            <h2>Food List</h2>

            <div class="row col-md-12">
                <ul class="inline" style="font-size:16px">
                    <li ng-if="vm.foods.length == 0">You have no foods. pls add!</li>
                    <li ng-if="vm.foods.length == 1">You have {{ vm.foods.length }} food.</li>
                    <li ng-if="vm.foods.length > 1">You have {{ vm.foods.length }} foods.</li>
                </ul>

                <form class="form-search">
                    <div class="input-group">
                        <input type="text" class="form-control  searchbar" placeholder="Search..."
                               ng-change="vm.search()" ng-model="vm.searchInput">
                        <span class="input-group-btn"><button type="submit" class="btn btn-search">Search</button>
                            </span>
                    </div>
                </form>
            </div>


            <div class="row col-md-12 foods" style="top: 12px;">

                <table class="table table-hover" cellspacing="0" ng-show="vm.foods.length >= 1">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Img</th>
                        <th>Price</th>
                        <th>Count</th>
                        <th>Modify</th>
                        <th>Delete</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="tmp in vm.foods track by $index">
                        <td>{{$index+1}}</td>
                        <td>{{ tmp.name }}</td>
                        <td>{{ tmp.price }}</td>
                        <td class="img"><img ng-src="{{tmp.img}}" width="30px"/></td>
                        <td>{{ tmp.foodType_name }}</td>
                        <td>
                            <button class=" btn-warning" ng-click="vm.modify($index,tmp)" >Modify
                            </button>
                        </td>
                        <td>
                            <button class=" btn-danger" ng-click="vm.delete($index,tmp)">
                                Delete
                            </button>
                        </td>

                    </tr>
                    </tbody>
                </table>

            </div>

            <div class="row">
                <a class="btn btn-info" ng-click="vm.add()"
                   style="margin-top: 12px;margin-left: 12px;"><i class="glyphicon-plus glyphicon"> Add</i> </a>
            </div>

        </div>
    </div>

</div>

<!--<h1 style="font-size:48px;padding-left: 24px">Food List</h1>-->
<!--<ul class="inline">-->
<!--<li ng-if="vm.foods.length == 0">You have no foods. pls add!</li>-->
<!--<li ng-if="vm.foods.length == 1">You have {{ vm.foods.length }} food.</li>-->
<!--<li ng-if="vm.foods.length > 1">You have {{ vm.foods.length }} foods.</li>-->
<!--</ul>-->
<!--<div class="col-sm-3 col-xs-12 col-lg-3">-->
<!--<form class="form-search">-->
<!--<div class="input-group">-->
<!--<input type="text" class="form-control " placeholder="Search..." ng-model="vm.query">-->
<!--<span class="input-group-btn">-->
<!--<button type="submit" class="btn btn-search">Search</button>-->
<!--</span>-->
<!--</div>-->
<!--</form>-->
<!--</div>-->
<!--`-->
<!---->

<!--<a class="btn btn-info" data-toggle="modal" data-target="#addFood"><i class="glyphicon-plus glyphicon"> Add</i> </a>-->


<!-- Modal -->
<div class="modal fade" id="addFoodModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="addLabel">Add Food</h4>
            </div>
            <div class="modal-body">
                <form role="form" class="form-horizontal" enctype="multipart/form-data" id="addForm">
                    <div class="form-group">
                        <label for="inputName" class="col-sm-2 control-label">Name</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="inputName" name="name"
                                   placeholder="Name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="inputPrice">Price</label>
                        <div class="col-sm-6">
                            <input type="number" class="form-control" id="inputPrice" name="price"
                                   placeholder="Price">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="inputType">Type</label>
                        <div class="styled-select">
                            <select id="inputType" name="foodType_name">
                                <option value="Drinks">Drinks</option>
                                <option value="Set Food">Set Food</option>
                                <option value="Snack">Snack</option>
                                <option value="Staple Food">Staple Food</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="inputImg">Image</label>
                        <div class="col-sm-6">
                            <input type="file" class="file btn btn-default" id="inputImg"
                                   data-show-preview="false"
                                   style="width: 100%" name="img">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button ng-click="vm.addNFood()" class="btn btn-info"><i class="icon-plus icon-white"></i> Add
                    food
                </button>
                <button class="btn btn-warning cancel" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="updateFoodModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="updateLabel">Modify Food</h4>
            </div>
            <div class="modal-body">
                <form role="form" class="form-horizontal" enctype="multipart/form-data" id="updateForm">
                    <input type="text" class="form-control" id="food_id" name="food_id"
                           ng-model="vm.updatetmp.food_id" style="display: none">
                    <input type="text" class="form-control" id="merchant_id" name="merchant_id"
                           ng-model="vm.updatetmp.merchant_id" style="display: none">
                    <div class="form-group">
                        <label for="updateName" class="col-sm-2 control-label">Name</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="updateName" name="name"
                                   ng-model="vm.updatetmp.name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="updatePrice">Price</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="updatePrice" name="price"
                                   ng-model="vm.updatetmp.price">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="updateType">Type</label>
                        <div class="styled-select">
                            <select id="updateType" name="foodType_name">
                                <option value="Drinks">Drinks</option>
                                <option value="Set Food">Set Food</option>
                                <option value="Snack">Snack</option>
                                <option value="Staple Food">Staple Food</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="updateImg">Image</label>
                        <div class="col-sm-6">
                            <input type="file" class="file btn btn-default" id="updateImg"
                                   data-show-preview="false"
                                   style="width: 100%" name="img">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button ng-click="vm.modifyFood()" class="btn btn-info"><i class="icon-plus icon-white"></i>
                    Modify
                    food
                </button>
                <button class="btn btn-warning cancel" ng-click="vm.resetUpdateFood()" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteFoodModal" tabindex="-1" role="dialog" style="color:white">

    <div class="modal-dialog" role="document">

        <div class="modal-header">
            <h3>Confirmation</h3>
        </div>

        <div class="modal-body">
            <h4>Are you sure you'd like to delete {{ vm.deletetmp.name }} ?</h4>
        </div>
        <div class="modal-footer">
            <button class="btn btn-danger ok" ng-click="vm.deleteFood(vm.deletetmp.food_id)">OK</button>
            <button class="btn btn-warning cancel"  ng-click="vm.resetDeleteFood()">Cancel</button>
        </div>
    </div>

</div>

